<template>
  <div id="App">
    <MyEcharts :options="options" :width="width" :theme="myTheme"></MyEcharts>
    <button @click="changeWidth">改变宽度</button>
    <button @click="changeOptions">改变数据源</button>
    <button @click="changeTheme">改变主题</button>
  </div>
</template>
<script>
import MyEcharts from "./components/MyEcharts.vue";
import {options1,options2} from "./charts/barChartOptions";
import customed from "./subject/customed.json"
import test from "./subject/test.json"
export default {
  name: "App",
  components: {
    MyEcharts,
  },
  data() {
    return {
      options: options2,
      width: '500px',
      myTheme:customed,
      // myTheme:test,

    };
  },
  methods: {
    // 改变宽度
    changeWidth(){
      if(this.width == '500px'){
        // console.log('变为800px');
        this.width = '800px'
        // console.log('打印this.width',this.width); 
      }else{
      // console.log('width回复到500');
      this.width = '500px'
      // console.log('打印this.width',this.width); 
      }
    },
    // 改变主题
    changeTheme(){
      if(this.myTheme.backgroundColor==customed.backgroundColor){
        this.myTheme=test
        // console.log('myTheme==customed,,执行了吗');
        // console.log('这是样式t');
      }else{
        // console.log('打印this.myTheme',this.myTheme);
        // console.log('打印customed',customed);
        // console.log('打印test',test);
        // console.log('这是样式c');
        this.myTheme=customed
      }
    },
    // 改变数据源
    changeOptions() {
      if(this.options.title.text == options1.title.text){
        // console.log('更改为2');
        this.options = options2
      }else{
        // console.log('更改为1');
        this.options = options1
      }
    },
  },
};
</script>